有些常用的變數值例如主要色的色碼、每個頁面統一的margin數值，如果決定更改某一項的數值則所有相關項目都得跟著改，但一個一個改的話又太麻煩了，這時就要靠常數了～

設定常數

先來講講常數要怎麼設定～

首先，新增一個js檔並將要設定為常數的各項數值宣告好。

const BUTTON_COLOR_SELECTED="#FEBC5F";
const BUTTON_COLOR="#DBDBDB";
const MAIN_COLOR="#A7050E";
const MAIN_MARGIN_RIGHT=24;
const MAIN_MARGIN_LEFT=24;
const MAIN_MARGIN_TOP="5%";

之後再宣告一個VAR物件將這先些常數儲存起來並export出去。
＊小提示：要注意VAR中陣列的宣告方式喔！

export const VAR={
    BUTTON_COLOR_SELECTED:BUTTON_COLOR_SELECTED,
    BUTTON_COLOR:BUTTON_COLOR,
    MAIN_COLOR:MAIN_COLOR,
    MAIN_MARGIN_RIGHT:MAIN_MARGIN_RIGHT,
    MAIN_MARGIN_LEFT:MAIN_MARGIN_LEFT,
    MAIN_MARGIN_TOP:MAIN_MARGIN_TOP
}

常數使用

這裡開始說常數要如何使用～

一開始先將VAR匯入需要使用到常數的檔案中。

import { VAR } from "../core/variable"

然後用VAR.常數名稱的方式就可以開始在檔案內使用常數了！

const styles = StyleSheet.create({
  cardContainerStyle: {
    marginLeft: VAR.MAIN_MARGIN_LEFT,
    marginRight: VAR.MAIN_MARGIN_RIGHT,
    marginTop: VAR.MAIN_MARGIN_TOP,
  }
});